Más opciones sobre la fecha

Últimamente vengo observando un detalle en algunas plantillas, se trata de la fecha tipo calendario que aplicamos hace tiempo al blog.

Pero el detalle no es la fecha es el lugar donde ubicamos la fecha, la situamos en el borde del blog, más exactamente en la línea de outer-wrapper.

¿Cómo hacerlo?

Lo primero de todo es configurar la fecha, nos dirigimos a Configuración | Formato | Formato de cabecera de fecha y escogemos la opción como la imagen siguiente.

Una vez tenemos la fecha establecida nos situamos en plantilla edición de HTML y marcamos para expandir la plantilla, buscamos:

<h2 class='date-header'><data:post.dateHeader/></h2>
y lo sustituimos por

<div id='fecha'>

<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>

</div>

Ahora ubicamos la etiqueta </head> justo antes añadimos el script.

<script type='text/javascript'>

var ultimaFecha;

function remplaza_fecha(d){

if (d == &quot;&quot;) {

d = ultimaFecha;

}

var da = d.split(&#39; &#39;);

dia = &quot;<strong class='fecha_dia'>&quot;+da[0]+&quot;</strong>&quot;;

mes = &quot;<strong class='fecha_mes'>&quot;+da[1].slice(0,3)+&quot;</strong>&quot;;

anio = &quot;<strong class='fecha_anio'>&quot;+da[2]+&quot;</strong>&quot;;

document.write(dia+mes);

ultimaFecha = d;

}

</script>

Más arriba buscamos ]]></b:skin> y siempre justo antes añadimos los estilos de la fecha para el día y el mes.

#fecha {

background:transparent url(url-imagen) no-repeat scroll 0 0;

height:46px;

margin:0 0 -60px -80px;

padding:7px 0;

text-align:center;

width:70px;

}

.fecha_dia {

display : block;

margin : 0;

color : #ffffff;

font-size : 14px;

font-weight : normal;

text-align : center;

}

.fecha_mes {

display : block;

font-size : 15px;

margin : 0;

color : #ffffff;

font-weight : normal;

text-align : center;

}

Donde url-imagen podemos añadir una imagen, o si lo preferimos un color de fondo con background-color:#000; si el fondo queda demasiado grande podemos reducirlo en #fecha cambiando la altura (height) y anchura (width)

¿Queda muy separado o demasiado pegado a las entradas? lo podemos mover en margin aumentando o disminuyendo margin:0 0 -60px -80px;

Si miramos en vista previa podría ser que aún no veamos la fecha ¿Por qué si lo hice todo bien? nos falta un último detalle y es ubicar #main-wrapper seguramente tienes añadido lo siguiente:

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

También puede ser lo siguiente que viene a ser lo mismo.

word-wrap: break-word;

overflow: hidden;

Es necesario eliminar esas propiedades, sin embargo la propiedad overflow: hidden; tiene una función importante, impide que un contenido demasiado grande se extienda fuera del bloque, lo vimos en algún blog que el texto o cualquier imagen no respeta el espacio del contenido y sale de su sitio.

Lo que haremos será suprimir esas propiedades de main-wrapper y añadirlas en los estilos del post de esa forma hará la misma función de evitar que se desborde cualquier contenido en las entradas.
Ahora si tenemos nuestra fecha bien visible.

.post {

estilos...

estilos...

estilos...

word-wrap: break-word;

overflow:hidden;

}